<template>
  <div class="StatisticsLayout" :style="rootStyle">
    <div class="StatisticsLayout--header" v-if="title">
      <span class="StatisticsLayout--header__icon">
        <img :src="titleImg || '@/assets/images/analyse/datespeed.png'" />
      </span>
      <span class="StatisticsLayout--header__title">{{ title }}</span>
      <el-tooltip v-if="tips" :content="tips" placement="bottom">
        <span class="StatisticsLayout--header__tips"></span>
      </el-tooltip>
    </div>
    <div class="StatisticsLayout--content">
      <div class="StatisticsLayout--content__list">
        <div v-for="item in statisticsArr" :key="item.name" class="item">
          <div class="item--label">{{ item.name }}</div>
          <div class="item--value">
            {{ item.value }}
            <span v-if="item.unit">{{ item.unit }}</span>
          </div>
        </div>
        <!-- 用户自定义内容 -->
        <slot></slot>
      </div>
    </div>
    <div class="StatisticsLayout--bg" v-if="hasBg">
      <div class="StatisticsLayout--bg__img">
        <img src="@/assets/images/analyse/icon_头部数据bg_网格装饰@2x.png" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
// import BtnGroups from '@/components/common/BtnGroupsTab.vue'
// 定义props属性
const props = defineProps({
  rootStyle: {
    type: String,
    default: ''
  },
  titleImg: { // 标题icon图片
    type: String,
    default: ''
  },
  title: {
    type: String,
    default() {
      return ''
    },
  },
  tips: {
    type: String,
    default() {
      return ''
    },
  },
  statisticsArr: {
    type: Array,
    default() {
      return [
        // {
        //   name: '郴州市',
        //   value: 13213,
        //   unit: 'km'
        // },
        // {
        //   name: '郴州市',
        //   value: 13213,
        //   unit: 'km'
        // },
        // {
        //   name: '郴州市',
        //   value: 13213,
        //   unit: 'km'
        // },
      ]
    },
  },
  hasBg: {
    type: Boolean,
    default: true
  }
})

// const rootStyle = computed(() => props.bgColor, () => {
//   if (props.bgColor) {
//     return `--bgColor: ${bgColor};`
//   } else {
//     return ''
//   }
// })

</script>

<style scoped lang="scss">
.StatisticsLayout {
  --bgColor: #fff;
  width: 100%;
  height: 100%;
  padding: 16px;
  border: 1px solid #d4d4d4;
  background-color: var(--bgColor);
  position: relative;
  text-align: center;

  &--header {
    line-height: 32px;
    position: relative;
    text-align: left;

    &__icon {
      display: inline-block;
      width: 32px;
      height: 32px;
      // background-image: url('@/assets/images/logo.png');
      background-size: cover;
      margin-right: 12px;

      img {
        width: 100%;
        height: auto;
        max-height: 32px;
      }
    }

    &__title {
      display: inline-block;
      font-size: 16px;
      color: #000000;
      font-weight: 500;
      position: relative;
      top: -10px;
    }

    &__tips {
      display: inline-block;
      width: 20px;
      height: 20px;
      background-image: url('@/assets/images/tips.png');
      background-size: cover;
      position: absolute;
      right: 0;
    }
  }

  &--content {
    &__list {
      display: flex;

      .item {
        flex: 1;

        &--name {
          font-size: 16px;
          color: rgba(0, 0, 0, 0.5);
        }

        &--value {
          font-size: 28px;
          color: rgba(0, 0, 0, 0.8);
          font-weight: 700;

          span {
            font-size: 20px;
          }
        }
      }
    }
  }

  &--bg {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    &__img {
      width: 100%;
      max-width: 427px;
      margin: 0 auto;

      img {
        width: 100%;
        height: auto;
        max-height: 49px;
      }
    }
  }
}
</style>
